//页面组件 管理拆分的组件
<template>
  <div class="container">
    <common-header :title="title"></common-header>
    <tab></tab>
    <list-scroll-wrapper></list-scroll-wrapper>
  </div>
</template>

<script>
import fieldDatas from "data/fields";
import { mapState } from "vuex";

//引入组件
import CommonHeader from "components/Header/Common";
import ListScrollWrapper from "components/ScrollWrapper/List";
import Tab from "components/Tab/Index";

export default {
  name: "List",
  computed: {
    ...mapState(["field"]),
    //这里的title数据被修改后给common-header组件使用
    title: function () {
      //如果能拿到state里的field属性
      //filter()返回符合条件(true)的新数组元素集合
      if (this.field) {
        const item = fieldDatas.filter((item) => {
          return item.field === this.field;
        });
        // console.log(item);
        /**
         * [
         *   {
         *     bgColor: "#4dc6ee",
         *     field: "view",
         *     icon: "icon-jingdian",
         *     iconText: "景点",
         *     id: 1
         *   }
         * ]
         */

        //拿到iconText属性值 酒店/景点/KTV/按摩/美食
        return item[0].iconText + "列表";
      }
    },
  },
  components: {
    CommonHeader: CommonHeader,
    ListScrollWrapper: ListScrollWrapper,
    Tab: Tab,
  },
};
</script>

<style lang="scss" scoped>
</style>